<template>
    <div class="main">
        <div class="form_content">
            <NScrollbar>
                <NSpin :show="spinShow">
                    <div class="content">
                        <VDisOrEnd v-if="RecordType.makeAccount" :id="dispatchInfo.workflowInfoVo?.fromId"
                            :assigneeFlag="dispatchInfo.workflowInfoVo?.assigneeFlag" typeName="报销申请单"></VDisOrEnd>
                        <div class="topTitle" v-else>
                            报销申请单详情
                        </div>
                        <div class="basin_info" style="padding:20px">
                            <div class="tableBox" v-if="dispatchInfo.reimburseType != '0'">
                                <div class="firstBox">杭州国家版本馆报销单</div>
                                <div class="secondBox">
                                    <div>部门名称：{{ dispatchInfo.deptName }}</div>
                                    <div>报销日期：{{ handleTime(dispatchInfo.submitTime) }}</div>
                                </div>
                                <div class="thirdBox">
                                    <div class="thirdLeft">报销内容</div>
                                    <div class="thirdRight">金额（元）</div>
                                    <div class="thirdRightA">单据张数</div>
                                </div>
                                <div class="thirdBox" v-for="(i, index) in dispatchInfo.reimburseDetailList" :key="index">
                                    <div class="thirdLeft">{{ i.reimburseContent }}</div>
                                    <div class="thirdRight">{{ i.salary }}</div>
                                    <div class="thirdRightA">{{ i.piece }}</div>
                                </div>
                                <div class="fourthBox1">
                                    <div class="fourthLeft">报销金额（人民币）:{{ dispatchInfo.amount1 }}</div>
                                    <div class="fourthRight">￥：{{ dispatchInfo.amount }}</div>
                                </div>
                            </div>
                            <div class="onBusinessBox" v-else>
                                <div class="boxA">杭州国家版本馆报销单</div>
                                <div class="boxB">
                                    <div style="margin-right: 150px;">
                                        <span style="margin-right: 150px;">报销时间：</span>
                                        <span>{{ handleTime(dispatchInfo.submitTime) }}</span>
                                    </div>
                                </div>
                                <div class="boxC">
                                    <div class="boxCA">部门名称</div>
                                    <div class="boxCB">{{ dispatchInfo.deptName }}</div>
                                    <div class="boxCC">出差人</div>
                                    <div class="boxCD">{{ dispatchInfo.errandName }}</div>
                                    <div class="boxCF">事由</div>
                                    <div class="boxCE">
                                        <NEllipsis style="max-width: 100%">
                                            {{ dispatchInfo.remark }}
                                        </NEllipsis>
                                    </div>
                                </div>
                                <div class="boxD">
                                    <div class="boxDA">起讫日期</div>
                                    <div class="boxDA">起讫地点</div>
                                    <div class="boxDB">天数</div>
                                    <div class="boxDC">
                                        <div class="boxDCA">交通费</div>
                                        <div class="boxDCB">
                                            <div class="leftA">交通工具</div>
                                            <div class="leftB">金额</div>
                                        </div>
                                    </div>
                                    <div class="boxDC">
                                        <div class="boxDCA">住宿费</div>
                                        <div class="boxDCB">
                                            <div class="leftA">发票金额</div>
                                            <div class="leftB">实报金额</div>
                                        </div>
                                    </div>
                                    <div class="boxDB">伙食费</div>
                                    <div class="boxDD">
                                        <div class="DDItem">杂费</div>
                                        <div class="DDItemA">实报金额</div>
                                    </div>
                                    <div class="boxDC">
                                        <div class="boxDCA">其他</div>
                                        <div class="boxDCB">
                                            <div class="leftA">事项</div>
                                            <div class="leftB">金额</div>
                                        </div>
                                    </div>
                                    <div class="boxDE">合计</div>
                                </div>
                                <div class="boxE" v-for="(i, index) in dispatchInfo.reimburseDetailList" :key="index">
                                    <div class="boxEA">
                                        <NEllipsis :line-clamp="1" style="max-width: 390px;">
                                            {{ handleDate(i.startTime, i.endTime) }}
                                            <template #tooltip>
                                                <div style="max-width: 390px;">
                                                    {{ handleDate(i.startTime, i.endTime) }}
                                                </div>
                                            </template>
                                        </NEllipsis>
                                    </div>
                                    <div class="boxEA">
                                        <NEllipsis :line-clamp="1" style="max-width: 390px;">
                                            {{ handleDate(i.startAddress, i.endAddress) }}
                                            <template #tooltip>
                                                <div style="max-width: 390px;">
                                                    {{ handleDate(i.startAddress, i.endAddress) }}
                                                </div>
                                            </template>
                                        </NEllipsis>
                                    </div>
                                    <div class="boxEB">
                                        <NEllipsis :line-clamp="1" style="max-width: 390px;">
                                            {{ i.days }}
                                            <template #tooltip>
                                                <div style="max-width: 390px;">
                                                    {{ i.days }}
                                                </div>
                                            </template>
                                        </NEllipsis>
                                    </div>
                                    <div class="boxED" style="font-size:14px">
                                        <NEllipsis :line-clamp="1" style="max-width: 390px;">
                                            {{ i.vehicles }}
                                            <template #tooltip>
                                                <div style="max-width: 390px;">
                                                    {{ i.vehicles }}
                                                </div>
                                            </template>
                                        </NEllipsis>
                                    </div>
                                    <div class="boxED">
                                        <NEllipsis :line-clamp="1" style="max-width: 390px;">
                                            {{ i.vehiclesFee }}
                                            <template #tooltip>
                                                <div style="max-width: 390px;">
                                                    {{ i.vehiclesFee }}
                                                </div>
                                            </template>
                                        </NEllipsis>
                                    </div>
                                    <div class="boxED">
                                        <NEllipsis :line-clamp="1" style="max-width: 390px;">
                                            {{ i.invoice }}
                                            <template #tooltip>
                                                <div style="max-width: 390px;">
                                                    {{ i.invoice }}
                                                </div>
                                            </template>
                                        </NEllipsis>
                                    </div>
                                    <div class="boxED">
                                        <NEllipsis :line-clamp="1" style="max-width: 390px;">
                                            {{ i.amount }}
                                            <template #tooltip>
                                                <div style="max-width: 390px;">
                                                    {{ i.amount }}
                                                </div>
                                            </template>
                                        </NEllipsis>
                                    </div>
                                    <div class="boxEB">
                                        <NEllipsis :line-clamp="1" style="max-width: 390px;">
                                            {{ i.boardExpenses }}
                                            <template #tooltip>
                                                <div style="max-width: 390px;">
                                                    {{ i.boardExpenses }}
                                                </div>
                                            </template>
                                        </NEllipsis>
                                    </div>
                                    <div class="boxEB">
                                        <NEllipsis :line-clamp="1" style="max-width: 390px;">
                                            {{ i.sundryFee }}
                                            <template #tooltip>
                                                <div style="max-width: 390px;">
                                                    {{ i.sundryFee }}
                                                </div>
                                            </template>
                                        </NEllipsis>
                                    </div>
                                    <div class="boxED">
                                        <NEllipsis :line-clamp="1" style="max-width: 390px;">
                                            {{ i.others }}
                                            <template #tooltip>
                                                <div style="max-width: 390px;">
                                                    {{ i.others }}
                                                </div>
                                            </template>
                                        </NEllipsis>
                                    </div>
                                    <div class="boxED">
                                        {{ i.othersFee }}
                                    </div>
                                    <div class="boxEC">
                                        {{ i.amountSum }}
                                    </div>
                                </div>
                                <div class="boxF">
                                    <div class="boxFA">
                                        小计
                                    </div>
                                    <div class="boxFB">
                                        {{ vehiclesFee }}
                                    </div>
                                    <div class="boxFB">
                                        {{ invoice }}
                                    </div>
                                    <div class="boxFB">
                                        {{ amount }}
                                    </div>
                                    <div class="boxFD">
                                        {{ boardExpenses }}
                                    </div>
                                    <div class="boxFD">
                                        {{ sundryFee }}
                                    </div>
                                    <div class="boxFB">
                                    </div>
                                    <div class="boxFB">
                                        {{ othersFee }}
                                    </div>
                                    <div class="boxFC">
                                        {{ amountSum }}
                                    </div>
                                </div>
                                <div class="fourthBox">
                                    <div class="fourthLeft">报销金额合计（大写）:{{ dispatchInfo.amount1 }}</div>
                                    <div class="fourthRight">小写 ￥：{{ dispatchInfo.amount }}</div>
                                </div>
                            </div>
                        </div>
                        <div class="basin_info">
                            <div style="display: flex; align-items: center">
                                <div class="basin_five_left">
                                    <div class="box">
                                        <span>申请人部门：</span>
                                        <NEllipsis style="max-width: 100%" placement="left">
                                            {{ dispatchInfo.deptName }}
                                        </NEllipsis>
                                    </div>
                                </div>
                                <div class="basin_five_left">
                                    <div class="box">
                                        <span>申请人：</span>
                                        <span>{{ dispatchInfo.userName }}</span>
                                    </div>
                                </div>
                                <div class="basin_five_left">
                                    <div class="box">
                                        <span>报销类型：</span>
                                        <span>{{ renderType(dispatchInfo.reimburseType) }}</span>
                                    </div>
                                </div>
                            </div>
                            <div style="display: flex; align-items: center">
                                <div class="basin_five_left">
                                    <div class="box">
                                        <span>银行卡号：</span>
                                        <NEllipsis style="max-width: 100%" placement="left">
                                            {{ dispatchInfo.bankCardNumber || "-" }}
                                        </NEllipsis>
                                    </div>
                                </div>
                                <div class="basin_five_left">
                                    <div class="box">
                                        <span>开户行：</span>
                                        <span>{{ dispatchInfo.openingBank || "-" }}</span>
                                    </div>
                                </div>
                                <div class="basin_five_left">
                                    <div class="box">
                                        <span>开户名：</span>
                                        <span>{{ dispatchInfo.accountName || "-" }}</span>
                                    </div>
                                </div>
                            </div>
                            <div style="display: flex; align-items: center">
                                <div class="box" v-if="dispatchInfo.reimburseType != '2'">
                                    <span>关联申请：</span>
                                    <div style="display:1">
                                        <a style="cursor:pointer;color:#0000EE" v-for="(i, index) in AboutList" :key="index"
                                            @click="goRun(i)">
                                            {{ i.key }} <p> </p>
                                        </a>
                                    </div>
                                </div>
                            </div>
                            <div :key="i.id" v-for="(i, index) in dispatchInfo.reimburseDetailList">
                                <div style="display: flex; align-items: center;margin-top: 20px;">
                                    <div class="box">
                                        <div style="margin-bottom: auto;">
                                            <span>报销附件{{ index + 1 }}：</span>
                                        </div>
                                        <div style="display: flex;flex-wrap: wrap;gap: 15px 0;">
                                            <VAttachments :attach-list="i.fileList"></VAttachments>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="topTitle">审批信息</div>
                        <div class="approve">
                            <div class="box">
                                <span>审批状态</span>
                                <span style="font-size: 20px;">{{ dispatchInfo.workflowInfoVo?.status }}</span>
                            </div>
                            <div class="box">
                                <span>审批流程</span>
                                <div style="color: #5fb17f;font-size: 20px;font-weight: 500;">
                                    <div style="display: inline;"
                                        v-for="(item, index) in dispatchInfo.workflowInfoVo?.workflowList" :key="index">
                                        <span :style="{ textDecoration: item.value ? 'underline' : 'none' }">
                                            {{ item.key }}</span>
                                        <span v-if="index != dispatchInfo.workflowInfoVo?.workflowList.length - 1">→</span>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="topTitle">审批记录</div>
                        <div class="table">
                            <NDataTable :bordered="false" :columns="columns" :data="tableData" :pagination="false" striped
                                :rowKey="rowKey" />
                        </div>
                    </div>
                </NSpin>
            </NScrollbar>
        </div>
    </div>
    <FixedAction>
        <NSpace justify="start">
            <NButton style="width: 78px; color: #5fb17f" ghost @click="goBack">
                <template #icon>
                    <img :src="VBackImg" style="width: 25px; height: 25px" />
                </template>
                返回
            </NButton>
        </NSpace>
    </FixedAction>
</template>
  
<script setup lang="ts">
import { NSpace, NButton, NScrollbar, NDataTable, useMessage, NSpin, NEllipsis } from 'naive-ui'
import type { DataTableColumns } from 'naive-ui'
import router from '@/router'
import { useRoute } from 'vue-router'
import { nextTick, ref, watch } from 'vue'
import { useTagStore } from '@/stores/layout'
import FixedAction from '@/components/FixedAction.vue'
import { sendRequest } from '@/utils/api'
import VDisOrEnd from '@/views/OA/Common/DisOrEnd.vue'
import VBackImg from '@/assets/images/back.png'
import { RecordType } from '@/router/utils'
import VAttachments from '@/views/OA/Common/Attachments.vue'

const tags = useTagStore().tags
const route = useRoute()
const message = useMessage()
const tableData = ref([])
const rowKey: any = (row: any) => row.id || ''
const columns: DataTableColumns = [
    {
        title: '类型',
        key: 'type',
        width: 50
    },
    {
        title: '人员',
        key: 'userName',
        width: 50
    },
    {
        title: '时间',
        key: 'time',
        width: 100
    },
    {
        title: '结果',
        key: 'result',
        width: 50
    },
    {
        title: '备注',
        key: 'remark',
        width: 150
    }
]

//报销日期
const handleTime = (val: any) => {
    if (!val) return
    const tmp = val.split(' ')[0].split('-')
    const tmp1 = tmp[0] + '年' + tmp[1] + '月' + tmp[2] + '日'
    return tmp1
}
//起讫日期、地点
const handleDate = (valueA: any, valueB: any) => {
    return (valueA || '/ ') + '至' + (valueB || ' /')
}
// 获取详情
const spinShow = ref(false)
const dispatchInfo: any = ref([])
const vehiclesFee: any = ref()
const invoice: any = ref()
const amount: any = ref()
const boardExpenses: any = ref()
const sundryFee: any = ref()
const othersFee: any = ref()
const amountSum: any = ref()
const getInfo = async () => {
    spinShow.value = true
    const [error, res] = await sendRequest({
        module: 'account',
        api: 'accountItem',
        uri: {
            id: route.query.id as never
        }
    })
    if (error) return message.error(error.message)
    if (res.code !== 0) return message.error(res.msg)
    const tmpRemark = res.data.remark
    res.data.remark = ''
    dispatchInfo.value = res.data

    nextTick(() => {
        setTimeout(() => {
            const target: any = document.querySelector('.boxCE')
            const rect = target?.getBoundingClientRect()
            if (!rect) return (dispatchInfo.value.remark = tmpRemark)
            target.style.width = rect.width + 'px'
            dispatchInfo.value.remark = tmpRemark
        }, 500)
    })

    dispatchInfo.primitiveId = res.data.primitiveId
    tableData.value = dispatchInfo.value.workflowInfoVo?.approvalRecordsList || []
    const tmp = res.data?.reimburseType
    dispatchInfo.reimburseType = tmp
    if (tmp != 2) {
        await getAbout()
    }
    const detail = res.data.reimburseDetailList
    vehiclesFee.value = detail.reduce((pre: any, cur: any) => {
        return Number(pre) + Number(cur.vehiclesFee)
    }, 0)
    invoice.value = detail.reduce((pre: any, cur: any) => {
        return Number(pre) + Number(cur.invoice)
    }, 0)
    boardExpenses.value = detail.reduce((pre: any, cur: any) => {
        return Number(pre) + Number(cur.boardExpenses)
    }, 0)
    sundryFee.value = detail.reduce((pre: any, cur: any) => {
        return Number(pre) + Number(cur.sundryFee)
    }, 0)
    othersFee.value = detail.reduce((pre: any, cur: any) => {
        return Number(pre) + Number(cur.othersFee)
    }, 0)
    amount.value = detail.reduce((pre: any, cur: any) => {
        return Number(pre) + Number(cur.amount)
    }, 0)
    const tmpAA = detail.reduce((pre: any, cur: any) => {
        return Number(pre) + Number(cur.amountSum)
    }, 0)
    amountSum.value = tmpAA.toFixed(2)
    spinShow.value = false
}

const renderType = (val: any) => {
    if (val == '0') {
        return '差旅'
    } else if (val == '1') {
        return '合同'
    } else if (val == '2') {
        return '其他'
    } else if (val == '3') {
        return '公出'
    } else if (val == '5') {
        return '劳务'
    } else {
        return '接待'
    }
}
// 关联
const AboutList: any = ref([])
const getAbout = async () => {
    const [error, res] = await sendRequest({
        module: 'account',
        api: 'droplistAll',
        override: {
            params: {
                reimburseType: dispatchInfo.reimburseType,
                primitiveId: dispatchInfo.primitiveId
            }
        }
    })
    if (error) return
    if (res.code !== 0) return
    AboutList.value = res.data
    console.log(res.data)
}
// 关联跳转
const pathName: any = ref()
const goRun = (val: any) => {
    switch (dispatchInfo.reimburseType) {
        //差旅
        case '0':
            pathName.value = '/OA/Onbusiness/MineApplicationDetail'
            break
        //合同
        case '1':
            pathName.value = '/OA/Seal/SealApplicationDetail'
            break
        // 公出
        case '3':
            pathName.value = '/OA/WorkOutside/OutsideDetail'
            break
        // 接待
        case '4':
            pathName.value = '/OA/HaveDinner/HaveDinnerInfo'
            break
        // 劳务
        case '5':
            pathName.value = '/OA/Labor/LaborInfo'
            break
    }
    router.push({
        path: pathName.value,
        query: {
            id: val.value
        }
    })
}
// 返回
const goBack = () => {
    const index = tags.findIndex((item: any) => item.path === router.currentRoute.value.fullPath)
    tags.splice(index, 1)
    if (tags.length == 0) {
        router.push({ path: '/OA/Workbench/UserDesktop' })
    } else history.back()
}

watch(
    () => route,
    async () => {
        if (route.path == '/OA/Account/AccountDetail' && route.query.id) await getInfo()
    },
    { deep: true, immediate: true }
)
</script>
  
<style scoped lang="scss">
@mixin CommonFont {
    font-size: 18px;
    font-family: PingFangSC, PingFang SC;
    font-weight: 400;
    color: #333333;
}

.main {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
    overflow: hidden;

    .form_content {
        width: 100%;
        height: 100%;
        padding: 20px 20px 0;

        .topTitle {
            font-size: 22px;
            font-family: PingFangSC, PingFang SC;
            font-weight: 500;
            color: #5fb17f;
            margin-bottom: 10px;
        }

        .content {
            display: flex;
            flex-direction: column;
            width: 100%;
            height: 100%;
            padding: 18px 33px 120px;
            overflow-y: scroll;
            background-color: #ebeceb;
            @include CommonFont;

            .basin_info {
                display: flex;
                flex-direction: column;
                width: 100%;
                height: auto;
                border-bottom: 1px dashed #bc9e70;
                margin-bottom: 20px;

                .basin_five_left {
                    flex: 0 0 33%;
                }

                .box1 {
                    display: flex;
                    justify-content: flex-start;
                    width: 200px;
                    margin-bottom: 20px;

                    span {
                        width: 100px;
                    }
                }

                .box {
                    display: flex;
                    align-items: center;
                    margin-bottom: 10px;
                    font-size: 16px;

                    span:first-child {
                        display: inline-block;
                        width: 120px;
                        font-weight: bold;
                        color: #333333;
                        font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
                    }

                    span:last-child {
                        display: inline-block;
                        flex: 1;
                        color: #55524f;
                        font-family: Helvetica Neue, Helvetica, Arial, sans-serif;

                    }
                }

                .basin-left {
                    .box1 {
                        display: flex;
                        align-items: center;
                        margin-bottom: 10px;
                        font-size: 16px;

                        span:first-child {
                            display: inline-block;
                            width: 120px;
                            font-weight: bold;
                            color: #333333;
                            font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
                        }

                        span:last-child {
                            display: inline-block;
                            flex: 1;
                            color: #55524f;
                            font-family: Helvetica Neue, Helvetica, Arial, sans-serif;

                        }
                    }
                }

            }

            .approve {
                display: flex;
                width: 100%;
                margin-bottom: 20px;
                border-bottom: 1px dashed #bc9e70;

                .box {
                    display: flex;
                    flex-direction: column;
                    justify-content: center;
                    min-width: 50px;
                    width: auto;
                    height: 90px;
                    border-radius: 4px;
                    border: 1px solid #d9d9d9;
                    padding: 12px;
                    margin-right: 10px;
                    margin-bottom: 20px;

                    span:first-child {
                        font-size: 16px;
                    }

                    span:last-child {
                        font-weight: 500;
                        color: #5fb17f;
                    }
                }
            }

            .table {
                width: 80%;
                background-color: #e1e1e1;
            }
        }
    }
}

.tableBox {
    width: 100%;
    height: auto;
    border: 1px solid black;
    background-color: #fff;
}

.firstBox {
    width: 100%;
    height: 80px;
    line-height: 80px;
    border-bottom: 1px solid black;
    text-align: center;
    letter-spacing: 20px;
    font-size: 28px;
    font-family: PingFangSC, PingFang SC;
    font-weight: bolder;
}

.secondBox {
    display: flex;
    justify-content: space-around;
    width: 100%;
    height: 50px;
    line-height: 50px;
    border-bottom: 1px solid black;
    font-size: 22px;
    letter-spacing: 5px;
    font-weight: bolder;
}

.thirdBox {
    display: flex;
    text-align: center;
    width: 100%;
    min-height: 50px;
    border-bottom: 1px solid black;
    font-size: 22px;
    letter-spacing: 5px;
    font-weight: bolder;

    .thirdLeft {
        flex: 0 0 50%;
        border-right: 1px solid black;
    }

    .thirdRight {
        flex: 0 0 25%;
        border-right: 1px solid black;
    }

    .thirdRightA {
        flex: 0 0 25%;
    }
}


.fourthBox {
    display: flex;
    width: 100%;
    min-height: 50px;
    font-size: 22px;
    letter-spacing: 5px;
    font-weight: bolder;

    .fourthLeft {
        display: flex;
        justify-content: center;
        align-items: center;
        flex: 0 0 59%;
        border-right: 1px solid black;
    }

    .fourthRight {
        flex: 0 0 41%;
        display: flex;
        justify-content: center;
        align-items: center;
    }

}

.fourthBox1 {
    display: flex;
    text-align: center;
    width: 100%;
    min-height: 50px;
    font-size: 22px;
    letter-spacing: 5px;
    font-weight: bolder;

    .fourthLeft {
        flex: 0 0 50%;
        border-right: 1px solid black;
    }

    .fourthRight {
        flex: 0 0 50%;
    }

}

.onBusinessBox {
    width: 100%;
    height: auto;
    border: 1px solid black;
    background-color: #fff;
}

.boxA {
    width: 100%;
    min-height: 80px;
    border-bottom: 1px solid black;
    text-align: center;
    letter-spacing: 20px;
    font-size: 28px;
    font-family: PingFangSC, PingFang SC;
    font-weight: bolder;
}

.boxB {
    width: 100%;
    min-height: 50px;
    border-bottom: 1px solid black;
    text-align: end;
    letter-spacing: 5px;
    font-size: 22px;
}

.boxC {
    display: flex;
    text-align: center;
    width: 100%;
    min-height: 50px;
    border-bottom: 1px solid black;

    .boxCA {
        display: flex;
        justify-content: center;
        align-items: center;
        flex: 0 0 15%;
        border-right: 1px solid black;
    }

    .boxCB {
        display: flex;
        justify-content: center;
        align-items: center;
        flex: 0 0 28%;
        border-right: 1px solid black;
    }

    .boxCC {
        display: flex;
        justify-content: center;
        align-items: center;
        flex: 0 0 8%;
        border-right: 1px solid black;
    }

    .boxCF {
        display: flex;
        justify-content: center;
        align-items: center;
        flex: 0 0 5%;
        border-right: 1px solid black;
    }

    .boxCD {
        display: flex;
        justify-content: center;
        align-items: center;
        flex: 0 0 21%;
        border-right: 1px solid black;
    }

    .boxCE {
        display: flex;
        justify-content: center;
        align-items: center;
        flex: 1;
    }
}

.boxD {
    display: flex;
    text-align: center;
    width: 100%;
    min-height: 60px;
    border-bottom: 1px solid black;

    .boxDA {
        display: flex;
        justify-content: center;
        align-items: center;
        flex: 0 0 15%;
        border-right: 1px solid black;
    }

    .boxDB {
        display: flex;
        justify-content: center;
        align-items: center;
        flex: 0 0 5%;
        border-right: 1px solid black;
    }

    .boxDE {
        display: flex;
        align-items: center;
        justify-content: center;
        flex: 1;
    }

    .boxDD {
        flex: 0 0 5%;
        height: auto;
        border-right: 1px solid black;
        font-size: 16px;

        .DDItem {
            min-height: 30px;
            border-bottom: 1px solid black;
        }

        .DDItemA {
            min-height: 30px;
            line-height: 30px;
        }
    }

    .boxDC {
        height: auto;
        flex: 0 0 16%;
        border-right: 1px solid black;

        .boxDCA {
            min-height: 30px;
            text-align: center;
            border-bottom: 1px solid black;
        }


        .boxDCB {
            text-align: center;
            display: flex;
            height: calc(100% - 30px);
            align-items: center;

            .leftA {
                flex: 0 0 50%;
                border-right: 1px solid black;
                font-size: 16px;
                height: 100%;
                display: flex;
                justify-content: center;
                align-items: center;
            }

            .leftB {
                flex: 0 0 50%;
                font-size: 16px;
            }
        }
    }

}

.boxE {
    display: flex;
    text-align: center;
    width: 100%;
    min-height: 50px;
    border-bottom: 1px solid black;
    font-size: 16px;

    .boxEA {
        display: flex;
        justify-content: center;
        align-items: center;
        flex: 0 0 15%;
        border-right: 1px solid black;
    }

    .boxEB {
        display: flex;
        justify-content: center;
        align-items: center;
        flex: 0 0 5%;
        border-right: 1px solid black;
        font-size: 16px;
    }

    .boxED {
        display: flex;
        justify-content: center;
        align-items: center;
        flex: 0 0 8%;
        border-right: 1px solid black;
        font-size: 16px;
    }

    .boxEC {
        display: flex;
        align-items: center;
        justify-content: center;
        flex: 1;
    }

}

.boxF {
    display: flex;
    width: 100%;
    min-height: 50px;
    border-bottom: 1px solid black;
    font-size: 16px;

    .boxFA {
        display: flex;
        justify-content: center;
        align-items: center;
        flex: 0 0 43%;
        border-right: 1px solid black;
        font-size: 24px;
    }

    .boxFB {
        display: flex;
        justify-content: center;
        align-items: center;
        flex: 0 0 8%;
        border-right: 1px solid black;
    }

    .boxFD {
        display: flex;
        justify-content: center;
        align-items: center;
        flex: 0 0 5%;
        border-right: 1px solid black;
    }

    .boxFC {
        display: flex;
        align-items: center;
        justify-content: center;
        flex: 1;
    }
}

.content::-webkit-scrollbar {
    display: none;
}

:deep(.n-spin-container) {
    width: 100%;
    height: 100%;
}

:deep(.n-scrollbar-container) {
    width: 100%;
    height: 100%;
}

:deep(.n-scrollbar-content) {
    width: 100%;
    height: 100%;
}

:deep(.n-spin-content) {
    width: 100%;
    height: 100%;
}

:deep(.n-ellipsis:not(.n-ellipsis--line-clamp)) {
    color: black !important;
    font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
}

:deep(.n-ellipsis.n-ellipsis--line-clamp) {
    color: black;
    font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
}

:deep(.n-ellipsis:not(.n-ellipsis--line-clamp)) {
    color: #55524f !important;
    font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
}

:deep(.n-ellipsis.n-ellipsis--line-clamp) {
    color: #55524f;
    font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
}
</style>
  